<template>
    <view class="nearby-stores">
      <view class="store-header">
       
      </view>
      <view class="store-list">
        <view 
          v-for="(store, index) in superStores" 
          :key="index" 
          class="store-item" 
          @click="navigateToDetail(store._id)"
        >
          <view class="store-logo">
            
            <image :src="store.imgUrl"></image> 
          </view>
          <view class="store-info">
            <text class="store-name">{{ store.name }}</text>
            <p>月售: {{ store.sales }} 起送: {{ store.expressLimit }} 基础运费: {{ store.expressPrice }}</p>
            <p class="slogan">{{ store.slogan }}</p>
          </view>
        </view>
      </view>
    </view>
 </template>
<script>
import config from "@/config.js"

export default {
  data() {
    return {
      superStores: []
    };
  },
  mounted() {
    this.fetchStores();
  },
  methods: {
    fetchStores() {
      uni.request({
        url: `${config.api_host}/super`,
        method: 'GET',
        success: (res) => {
          this.superStores = res.data;
        },
        fail: (err) => {
          console.error('获取店铺数据失败:', err);
        }
      });
    },
    navigateToDetail(storeId) {
      // 这里假设你有对应的页面和路由配置
      uni.navigateTo({
        url: `/pages/store/detail?id=${storeId}`
      });
    }
  }
};
</script>
 
<style scoped>
.nearby-stores {
  width: 100%;
  padding: 15px;
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.more {
  color: #007AFF;
    margin-right: 20px;
}

.store-list {
  width: 100%;
}

.store-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
}

.store-logo {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.store-logo image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-info {
  flex: 1;
}

.store-name {
  font-size: 18px;
  margin-bottom: 5px;
}

.slogan {
  color: #FF5722;
  margin-top: 5px;
}

.loading {
  text-align: center;
  color: #999;
}
</style>